<template>
  <rx-dialog style="height: 100%;" @handOk="ok" @cancel="cancel">
    <a-form :form="form" layout="inline">
      <div>
        <rx-grid ref="table"
                 :dataSource="headerFields"
                 :allowRowSelect="false"
                 :multiSelect="false"
                 :showPage="false"
                 :columns="headerColumns"
                 :heightauto="true"
        >
        <span slot="name" slot-scope="{text,record,index,blur}">
          {{text}}
        </span>
            <span slot="permission" slot-scope="{text,record,index,blur}" @ok="blur(index,'read',$event,record)">
                    <a-checkbox :checked="filterPermissionEdit(record.permission.value)" @click.stop="compile(record)"></a-checkbox>
                    <my-icon v-if="!filterPermissionEdit(record.permission.value)" @click="editRecord(record,index)" style="margin-left: 5px" type="iconsetup"></my-icon>
                    <a-tag v-if="record.permission.value !='none' && record.permission.value !='everyone'" style="margin-left: 10px" color="green">
                        {{i18n('list.alreadySet','已设置')}}
                    </a-tag>
                </span>
        </rx-grid>
      </div>

    </a-form>
  </rx-dialog>
</template>
<script>
  import {BaseForm, RxLayout, RxGrid,Dialog, RxCodemirror,Util} from "@lowcode/jpaas-common-lib";

  import DialogBox from "@/assets/js/DialogBox";


  export default {
    name: 'FormMobileGroupEdit',
    mixins: [BaseForm],
    props: {
      mainData: {
        type: Array,
        default: []
      },
      layerid: String,
      lydata: Object,
      destroy: Function,
    },
    components: {
      RxLayout,
      RxGrid,
      RxCodemirror,
      Dialog
    },
    data() {
      return {
        editIndex: 0,
        selectAllType: "",
        changeValue: {},
        activeKey: "columnConf",
        isAllowDataGrant: false,
        isLeftTree: 'NO',
        expandedRowKeys: [],
        fieldDatas: [],
        headerFields: [],
        headerColumns: [
          {
            title: this.i18n('form.groupName','分组名称'),
            dataIndex: 'name',
            width: '30%',
            allowCellEdit: true,
            scopedSlots: {customRender: 'name'}
          },
          {
            title: this.i18n('form.power','权限'),
            dataIndex: 'permission',
            allowCellEdit: false,
            scopedSlots: {customRender: 'permission'}
          }]
      }
    },
    created() {
      this.headerFields = this.mainData;
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"formMobile",key);
        },
        filterPermissionEdit(value){
            if(value=='everyone'){
                return true
            }else {
                return false
            }
        },
        compile(record){
            if(record.permission.value =='everyone'){
                record.permission.value='none';
                record.permission.label=this.i18n('form.noPermissions','无权限')
            }else {
                record.permission.value='everyone';
                record.permission.label=this.i18n('form.all','所有人')
            }
        },
      editRecord(record, index) {
        var self_ = this;
        this.editIndex = index;
        DialogBox.openPermissionUser(this, record.permission.value, function (self_, data) {
          var datas = self_.$refs.table.getData();
          var row = datas[self_.editIndex];
          self_.setChangeValues(data, row);
        });
      },
      setAttrsValue() {
        var selectDatas = this.$refs.table.getSelectedRows();
        if (!selectDatas || selectDatas.length == 0) {
          this.$message.info(this.i18n('form.setAttrMsg','请先选择需要设置的列数据，再进行操作！'));
          return;
        }
        if (selectDatas.length >1) {
          this.$message.info(this.i18n('form.setSelectedMsg','只能选择一条数据操作!'));
          return;
        }
        var self_ = this;
        DialogBox.openPermissionUser(this, selectDatas[0].permission.value, function (self_, data) {
          self_.setChangeValues(data, selectDatas[0]);
        });
      },
      setChangeValues(data, row) {
        var rowData = {permission:data};
        this.$refs.table.updateRow(row, rowData);
        this.headerFields=this.$refs.table.dataAction;
      },
      getMainData() {
        var returnObj = {};
        var dataList = this.$refs.table.getData();
        if (!dataList || dataList.length == 0) {
          return returnObj;
        }
        for (var i = 0; i < dataList.length; i++) {
          var dataObj = dataList[i];
          returnObj[dataObj.alias] = dataObj;
        }
        return returnObj;
      },
      ok() {
        var permissions=[];
        for (var i = 0; i < this.headerFields.length; i++) {
          permissions.push({"id":this.headerFields[i].id,"name":this.headerFields[i].name,"permission":this.headerFields[i].permission});
        }
        Util.closeWindow(this,"ok",permissions);
      },
      cancel() {
        Util.closeWindow(this,"cancel");
      },
    }
  }
</script>

<style scoped>
  .ant-btn-primary {
    margin-top: 0px;
    margin-right: 10px;
    margin-left: 0;
  }

  .btn-inline-box {
    margin: 10px 20px 6px 20px;
  }
</style>